<template>
  <div>
    <br />
    <h2>{{ msg }}</h2>
    <br />

    <div class="row align-items-md-stretch">
      <div
        id="buyerHot"
        :style="{ width: '50%', height: '300px' }"
        class="col-md-4"
      ></div>
      <div
        id="sellerHot"
        :style="{ width: '50%', height: '300px' }"
        class="col-md-4"
      ></div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      msg: "今日农产品热度对比",
      cate: "",
      buyerHotchart: "",
      sellerHotchart: "",
      buyerHotOption: {
        backgroundColor: "#0f375f",
        title: {
          text: "今日买家热度",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          data: [],
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: {
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series: [
          {
            name: "买家热度",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 15,
            data: [],
          },
          {
            name: "bar",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              barBorderRadius: 5,
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#14c8d4" },
                { offset: 1, color: "#43eec6" },
              ]),
            },
            data: [],
          },
          {
            name: "买家热度",
            type: "bar",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(20,200,212,0.5)" },
                { offset: 0.2, color: "rgba(20,200,212,0.2)" },
                { offset: 1, color: "rgba(20,200,212,0)" },
              ]),
            },
            z: -12,
            data: [],
          },
          {
            name: "买家热度",
            type: "pictorialBar",
            symbol: "rect",
            itemStyle: {
              color: "#0f375f",
            },
            symbolRepeat: true,
            symbolSize: [12, 4],
            symbolMargin: 1,
            z: -10,
            data: [],
          },
        ],
      },
      sellerHotOption: {
        backgroundColor: "#0f375f",
        title: {
          text: "今日卖家热度",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          data: [],
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: {
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series: [
          {
            name: "卖家热度",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 15,
            data: [],
          },
          {
            name: "bar",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              barBorderRadius: 5,
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#14c8d4" },
                { offset: 1, color: "#43eec6" },
              ]),
            },
            data: [],
          },
          {
            name: "卖家热度",
            type: "bar",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(20,200,212,0.5)" },
                { offset: 0.2, color: "rgba(20,200,212,0.2)" },
                { offset: 1, color: "rgba(20,200,212,0)" },
              ]),
            },
            z: -12,
            data: [],
          },
          {
            name: "卖家热度",
            type: "pictorialBar",
            symbol: "rect",
            itemStyle: {
              color: "#0f375f",
            },
            symbolRepeat: true,
            symbolSize: [12, 4],
            symbolMargin: 1,
            z: -10,
            data: [],
          },
        ],
      },
    };
  },
  methods: {
    getInfo() {
      this.axios
        .get("http://122.51.157.58:8081/api-service/getHotByBuyer?key=123456")
        .then((body) => {
          var result = body.data;
          for (var i = result.data.result.length - 1; i >= 0; i--) {
            this.buyerHotOption.xAxis.data.push(result.data.result[i].cateName);
            this.buyerHotOption.series[0].data.push(
              parseInt(result.data.result[i].buyerHeat) + 2000
            );
            this.buyerHotOption.series[1].data.push(
              parseInt(result.data.result[i].buyerHeat)
            );
            this.buyerHotOption.series[2].data.push(
              parseInt(result.data.result[i].buyerHeat) + 2000
            );
            this.buyerHotOption.series[3].data.push(
              parseInt(result.data.result[i].buyerHeat) + 2000
            );
          }
          this.buyerHotchart.setOption(this.buyerHotOption);
        });

      this.axios
        .get("http://122.51.157.58:8081/api-service/getHotBySeller?key=123456")
        .then((body) => {
          var result = body.data;
          for (var i = result.data.result.length - 1; i >= 0; i--) {
            this.sellerHotOption.xAxis.data.push(
              result.data.result[i].cateName
            );
            this.sellerHotOption.series[0].data.push(
              parseInt(result.data.result[i].sellerHeat) + 2000
            );
            this.sellerHotOption.series[1].data.push(
              parseInt(result.data.result[i].sellerHeat)
            );
            this.sellerHotOption.series[2].data.push(
              parseInt(result.data.result[i].sellerHeat) + 2000
            );
            this.sellerHotOption.series[3].data.push(
              parseInt(result.data.result[i].sellerHeat) + 2000
            );
          }
          this.sellerHotchart.setOption(this.sellerHotOption);
        });
    },
  },
  mounted() {
    this.buyerHotchart = this.echarts.init(document.getElementById("buyerHot"));
    this.sellerHotchart = this.echarts.init(
      document.getElementById("sellerHot")
    );
    this.getInfo();
  },
};
</script>

